<!-- 搜索表单 -->
<template>
  <a-card :bordered="false">
    <!-- 搜索表单 -->
    <a-form :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }">
      <a-row>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="名称">
            <a-auto-complete v-model:value="oceanBulkCargoWhere.customer" :options="customerOptions" placeholder="请输入"
              @select="customer_onSelect2" @search="customer_onSearch" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item :wrapper-col="{ span: 24 }">
            <em></em>
            <a-space>
              <a-button type="primary" @click="oceanBulkCargoReload">查询</a-button>
              <a-button @click="oceanBulkCargoReset">重置</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!-- 表格 -->
    <ele-pro-table ref="oceanBulkCargoTableRef" row-key="id" :columns="columns" 
    :datasource="datasource"
    @update:selection="oceanBulkCargoTableOnSelectionChange" :customRow="oceanBulkCargoTableRowClick"
      v-model:current="oceanBulkCargoCurrent" cacheKey="oceanBulkCargo"
      :scroll="{ x: 1000 }">
      <template #toolbar>
        <a-space>
          <a-button type="primary" @click="oceanBulkCargoOpenEdit()" v-any-permission="['ocean:oceanBulkCargo:save']">
            <template #icon>
              <plus-outlined />
            </template>
            <span>新建</span>
          </a-button>
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="oceanBulkCargoOpenEdit(record)" v-any-permission="['ocean:oceanBulkCargo:update']">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定要删除此项吗？" @confirm="oceanBulkCargoRemove(record)">
              <a class="ele-text-danger" v-any-permission="['ocean:oceanBulkCargo:remove']">删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </ele-pro-table>
  </a-card>
  <!-- 海运散货添加、修改弹窗 -->
  <ele-modal :width="860" v-model:visible="oceanBulkCargoVisible_modal" :confirm-loading="loading"
    :title="oceanBulkCargoIsUpdate ? '修改海运散货' : '新建海运散货'" position="{top: 100px, left?:50%}"
    :body-style="{ paddingBottom: '8px' }" @ok="oceanBulkCargoSave" :maskClosable="false" cacheKey="oceanBulkCargo">
    <a-form ref="oceanBulkCargoFormRef" :model="oceanBulkCargoForm" :rules="oceanBulkCargoRules"
      :label-col="{ md: { span: 7 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 17 }, sm: { span: 24 } }">
      <a-row :gutter="16">
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="客户" name="customer_val">
            <a-auto-complete v-model:value="oceanBulkCargoForm.customer_val" :options="customerOptions" placeholder="请输入"
              @select="customer_onSelect" @search="customer_onSearch" @blur="customer_blur" allow-clear />
          </a-form-item>
          <a-form-item label="客户单号" name="customerCode">
            <a-input allow-clear :maxlength="200" placeholder="请输入客户单号" v-model:value="oceanBulkCargoForm.customerCode"
              autocomplete="off" />
          </a-form-item>
          <a-form-item label="服务" name="services">
            <a-select v-model:value="oceanBulkCargoForm.services" placeholder="请输入服务" allow-clear>
              <a-select-option value="EMC音船不包税">EMC音船不包税</a-select-option>
              <a-select-option value="FEDX">FEDX</a-select-option>
              <a-select-option value="OA昔船卡派包税">OA昔船卡派包税</a-select-option>
              <a-select-option value="OA船海卡不包税">OA船海卡不包税</a-select-option>
              <a-select-option value="UPS">UPS</a-select-option>
              <a-select-option value="代拉代报">代拉代报</a-select-option>
              <a-select-option value="休斯顿统配">休斯顿统配</a-select-option>
              <a-select-option value="卡派包税">卡派包税</a-select-option>
              <a-select-option value="奥克兰统配">奥克兰统配</a-select-option>
              <a-select-option value="散货">散货</a-select-option>
              <a-select-option value="整柜直送">整柜直送</a-select-option>
              <a-select-option value="首船卡派按方包税">首船卡派按方包税</a-select-option>
              <a-select-option value="空派">空派</a-select-option>
              <a-select-option value="美东统配">美东统配</a-select-option>
              <a-select-option value="美森正班包税">美森正班包税</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="fba" name="fba_val">
            <a-auto-complete v-model:value="oceanBulkCargoForm.fba_val" :options="fbaOptions" placeholder="请输入车队"
              @select="fba_onSelect" @search="fba_onSearch" @blur="fba_blur" allow-clear />
          </a-form-item>
          <a-form-item label="联系人" name="contacts">
            <a-input allow-clear :maxlength="200" placeholder="请输入联系人" v-model:value="oceanBulkCargoForm.contacts"
              autocomplete="off" />
          </a-form-item>
          <a-form-item label="公司名" name="company">
            <a-input allow-clear :maxlength="200" placeholder="请输入公司名" v-model:value="oceanBulkCargoForm.company"
              autocomplete="off" />
          </a-form-item>
          <a-form-item label="联系电话" name="phone">
            <a-input allow-clear :maxlength="200" placeholder="请输入联系电话" v-model:value="oceanBulkCargoForm.phone"
              autocomplete="off" />
          </a-form-item>
          <a-form-item label="地址1" name="addr1">
            <a-input allow-clear :maxlength="200" placeholder="请输入地址1" v-model:value="oceanBulkCargoForm.addr1"
              autocomplete="off" />
          </a-form-item>
          <a-form-item label="城市" name="city">
            <a-input allow-clear :maxlength="200" placeholder="请输入城市" v-model:value="oceanBulkCargoForm.city"
              autocomplete="off" />
          </a-form-item>
          <a-form-item label="省份" name="province">
            <a-input allow-clear :maxlength="200" placeholder="请输入省份" v-model:value="oceanBulkCargoForm.province"
              autocomplete="off" />
          </a-form-item>
          <a-form-item label="国家" name="country">
            <a-input allow-clear :maxlength="200" placeholder="请输入国家" v-model:value="oceanBulkCargoForm.country"
              autocomplete="off" />
          </a-form-item>
          <a-form-item label="邮编" name="postal">
            <a-input allow-clear :maxlength="200" placeholder="请输入邮编" v-model:value="oceanBulkCargoForm.postal"
              autocomplete="off" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="报关方式" name="applyCustomsType">
            <a-select v-model:value="oceanBulkCargoForm.applyCustomsType" placeholder="请选择" allow-clear>
              <a-select-option value="买单报关">买单报关</a-select-option>
              <a-select-option value="报关退税">报关退税</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="清关方式" name="customsClearance">
            <a-select v-model:value="oceanBulkCargoForm.customsClearance" placeholder="请选择" allow-clear>
              <a-select-option value="一般贸易清关">一般贸易清关</a-select-option>
              <a-select-option value="快件清关">快件清关</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="交税方式" name="payTaxesType">
            <a-select v-model:value="oceanBulkCargoForm.payTaxesType" placeholder="请选择" allow-clear>
              <a-select-option value="不包税">不包税</a-select-option>
              <a-select-option value="包税">包税</a-select-option>
              <a-select-option value="自主税号">自主税号</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="交货条款" name="deliveryTerms">
            <a-select v-model:value="oceanBulkCargoForm.deliveryTerms" placeholder="请选择" allow-clear>
              <a-select-option value="DDU">DDU</a-select-option>
              <a-select-option value="DDP">DDP</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="购买保险" name="purchaseInsurance">
            <a-select v-model:value="oceanBulkCargoForm.purchaseInsurance" placeholder="请选择" allow-clear>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-item label="预报总箱数" name="boxNumsTotal">
            <a-input allow-clear :maxlength="200" placeholder="请输入预报总箱数" v-model:value="oceanBulkCargoForm.boxNumsTotal"
              autocomplete="off" />
          </a-form-item>
        </a-col>
        <a-col :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-item label="预报体积" name="boxVolume">
            <a-input allow-clear :maxlength="200" placeholder="m³" v-model:value="oceanBulkCargoForm.boxVolume"
              autocomplete="off" />
          </a-form-item>
        </a-col>
        <a-col :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-item label="预报重量" name="boxWeight">
            <a-input allow-clear :maxlength="200" placeholder="kg" v-model:value="oceanBulkCargoForm.boxWeight"
              autocomplete="off" />
          </a-form-item>
        </a-col>
        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="备注" name="remark" :label-col="{ md: { span: 2 }, sm: { span: 24 } }"
            :wrapper-col="{ md: { span: 22 }, sm: { span: 24 } }">
            <a-textarea v-model:value="oceanBulkCargoForm.remark" allow-clear :maxlength="1200" placeholder="请输入备注"
              autocomplete="off" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>

import { ref, reactive, watch } from 'vue';
import { toDateString } from 'ele-admin-pro';
import useFormData from '@/utils/use-form-data';
import { message } from 'ant-design-vue';
import { TIME_OUT } from '@/config/damon';

import { listCustomersSel } from '@/api/order/customer';
import { pageOceanBulkCargo, removeOceanBulkCargo, addOceanBulkCargo, updateOceanBulkCargo } from '@/api/ocean/oceanBulkCargo';
import { listOceanBulkCargoAddressSel } from '@/api/ocean/oceanBulkCargoAddress';

let permissions = (processListDataS) => {
}

// 表格实例
const oceanBulkCargoTableRef = ref(null);
// 当前选中数据
const oceanBulkCargoCurrent = ref(null);

// 表格列配置
const columns = ref([
  {
    key: 'index',
    width: 48,
    align: 'center',
    fixed: 'left',
    hideInSetting: true,
    customRender: ({ index }) => index + (oceanBulkCargoTableRef.value?.tableIndex ?? 0)
  },
  {
    title: '客户',
    dataIndex: 'customer',
    key: 'customer',
    // sorter: true
  },
  {
    title: '客户单号',
    dataIndex: 'customerCode',
    key: 'customerCode',
    // sorter: true
  },
  {
    title: '服务',
    dataIndex: 'services',
    key: 'services',
    // sorter: true
  },
  {
    title: 'fba',
    dataIndex: 'fba',
    key: 'fba',
    // sorter: true
  },
  {
    title: '联系人',
    dataIndex: 'contacts',
    key: 'contacts',
    // sorter: true
  },
  {
    title: '公司名',
    dataIndex: 'company',
    key: 'company',
    // sorter: true
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone',
    // sorter: true
  },
  {
    title: '地址1',
    dataIndex: 'addr1',
    key: 'addr1',
    // sorter: true
  },
  {
    title: '城市',
    dataIndex: 'city',
    key: 'city',
    // sorter: true
  },
  {
    title: '省份',
    dataIndex: 'province',
    key: 'province',
    // sorter: true
  },
  {
    title: '国家',
    dataIndex: 'country',
    key: 'country',
    // sorter: true
  },
  {
    title: '邮编',
    dataIndex: 'postal',
    key: 'postal',
    // sorter: true
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    // sorter: true
  },
  {
    title: '报关方式',
    dataIndex: 'applyCustomsType',
    key: 'applyCustomsType',
    hideInTable: true,
    // sorter: true
  },
  {
    title: '清关方式',
    dataIndex: 'customsClearance',
    key: 'customsClearance',
    hideInTable: true,
    // sorter: true
  },
  {
    title: '交税方式',
    dataIndex: 'payTaxesType',
    key: 'payTaxesType',
    hideInTable: true,
    // sorter: true
  },
  {
    title: '交货条款',
    dataIndex: 'deliveryTerms',
    key: 'deliveryTerms',
    hideInTable: true,
    // sorter: true
  },
  {
    title: '购买保险',
    dataIndex: 'purchaseInsurance',
    key: 'purchaseInsurance',
    hideInTable: true,
    // sorter: true
  },
  {
    title: '预报总箱数',
    dataIndex: 'boxNumsTotal',
    key: 'boxNumsTotal',
    hideInTable: true,
    // sorter: true
  },
  {
    title: '预报体积',
    dataIndex: 'boxVolume',
    key: 'boxVolume',
    hideInTable: true,
    // sorter: true
  },
  {
    title: '预报重量',
    dataIndex: 'boxWeight',
    key: 'boxWeight',
    hideInTable: true,
    // sorter: true
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    // sorter: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    resizable: true,
    width: 150,
    ellipsis: true,
    customRender: ({ text }) => toDateString(text)
  },
  {
    title: '创建人',
    dataIndex: 'createName',
    key: 'createName',
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
    resizable: true,
    width: 150,
    ellipsis: true,
    customRender: ({ text }) => toDateString(text)
  },
  {
    title: '更新人',
    dataIndex: 'updateName',
    key: 'updateName',
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
    hideInSetting: true
  }
]);

// 表单数据
const { form: oceanBulkCargoWhere, resetFields } = useFormData({
  username: '',
  sex: undefined
});

// 表格数据源
const datasource = ({ page, limit, where, orders }) => {
  return pageOceanBulkCargo({ ...where, ...orders, page, limit });
};

/* 搜索 */
const oceanBulkCargoReload = () => {
  oceanBulkCargoTableRef?.value?.reload({ page: 1, where: oceanBulkCargoWhere });
};
const oceanBulkCargoReload2 = () => {
  oceanBulkCargoTableRef?.value?.reload();
};

let oceanBulkCargoWhere_timeout = 0
watch(() => oceanBulkCargoWhere, (val) => {
  clearTimeout(oceanBulkCargoWhere_timeout)
  oceanBulkCargoWhere_timeout = setTimeout(() => {
    oceanBulkCargoReload();
  }, TIME_OUT);
},
  { deep: true }
)

let oceanBulkCargoTableRowClick = (record, index) => {
  return {
    onClick: (event) => {
      oceanBulkCargoCurrent.value = record
      sendOceanBulkCargoSelect()
    },
  }
}
let oceanBulkCargoTableOnSelectionChange = (current_options) => {
  oceanBulkCargoCurrent.value = current_options[0];
  sendOceanBulkCargoSelect()
};
const emit = defineEmits(['oceanBulkCargoSelect']);
let sendOceanBulkCargoSelect = (data) => {
  if (data != null && data != '' && data != undefined) {
    oceanBulkCargoCurrent.value.state = data
  }
  emit('oceanBulkCargoSelect', {
    'bulkCargoId': oceanBulkCargoCurrent.value.id,
    'invoice': {
      'company': oceanBulkCargoCurrent.value.customer,
      'driver': oceanBulkCargoCurrent.value.driver,
      'carTeam': oceanBulkCargoCurrent.value.carTeam,
    },
    'state': oceanBulkCargoCurrent.value.state,
  });
}

defineExpose({ permissions, oceanBulkCargoReload, sendOceanBulkCargoSelect });

/*  重置 */
const oceanBulkCargoReset = () => {
  resetFields();
  oceanBulkCargoReload();
};

/* 删除单个 */
const oceanBulkCargoRemove = (record) => {
  const hide = message.loading('请求中..', 0);
  removeOceanBulkCargo(record.id).then((msg) => {
    hide();
    message.success(msg);
    oceanBulkCargoReload2();
  }).catch((e) => {
    hide();
    message.error(e.message);
  });
};


// 弹窗是否打开
const oceanBulkCargoVisible_modal = ref(false);

// 是否是修改
const oceanBulkCargoIsUpdate = ref(false);

// 提交状态
const loading = ref(false);

//
const oceanBulkCargoFormRef = ref(null);

// 表单数据
const { form: oceanBulkCargoForm, resetFields: oceanBulkCargoResetFormFields } = useFormData({
  id: undefined,
  customer: '',
  vessel: '',
});

// 表单验证规则
const oceanBulkCargoRules = reactive({
  name: [
    {
      required: true,
      message: '请输入名称',
      type: 'string',
    }
  ],
});

//防止重复刷新
//客户下拉列表
let customer_m_timeout = 0
const customerOptions = ref([]);
const customer_onSearch = searchText => {
  clearTimeout(customer_m_timeout)
  customer_m_timeout = setTimeout(() => {
    listCustomersSel({ 'name': searchText, type: '货代外贸' }).then(msg => {
      customerOptions.value = msg
    }).catch((e) => {
    })
  }, TIME_OUT);
};
const customer_onSelect = (value2, option2) => {
  // let a = customerOptions.value.find((item)=> {return item.value=value})
  oceanBulkCargoForm.customer_val = option2.label
  oceanBulkCargoForm.customer = option2.label
  oceanBulkCargoForm.customerId = option2.value
};
const customer_m_change = (value2) => {
  // let a = customerOptions.value.find((item)=> {return item.value=value2})
  // oceanBulkCargoForm.customer_val=a.label
  // oceanBulkCargoForm.customer=a.label
};
const customer_blur = () => {
  oceanBulkCargoForm.customer_val = oceanBulkCargoForm.customer
};
//搜索客户条件
const customer_onSelect2 = (value2, option2) => {
  // let a = customerOptions.value.find((item)=> {return item.value=value})
  oceanBulkCargoWhere.customer = option2.label
};

//fba下拉
const fbaOptions = ref([]);
const fba_onSearch = searchText => {
  clearTimeout(customer_m_timeout)
  customer_m_timeout = setTimeout(() => {
    listOceanBulkCargoAddressSel({ 'name': searchText, type: '车队' }).then(msg => {
      fbaOptions.value = msg
    }).catch((e) => {
    })
  }, TIME_OUT);
};
const fba_onSelect = (value2, option2) => {
  // let a = fbaOptions.value.find((item)=> {return item.value=value})
  oceanBulkCargoForm.fba_val = option2.label
  oceanBulkCargoForm.fba = option2.label
  oceanBulkCargoForm.fbaId = option2.value
  oceanBulkCargoForm.contacts = option2.contacts
  oceanBulkCargoForm.company = option2.company
  oceanBulkCargoForm.phone = option2.phone
  oceanBulkCargoForm.addr1 = option2.addr1
  oceanBulkCargoForm.city = option2.city
  oceanBulkCargoForm.province = option2.province
  oceanBulkCargoForm.country = option2.country
  oceanBulkCargoForm.postal = option2.postal
};
const fba_blur = () => {
  oceanBulkCargoForm.fba_val = oceanBulkCargoForm.fba
};

/* 打开编辑弹窗 */
const oceanBulkCargoOpenEdit = (record) => {
  oceanBulkCargoResetFormFields();
  oceanBulkCargoFormRef.value?.clearValidate();
  oceanBulkCargoCurrent.value = record ?? {};
  if (record == undefined) {
    oceanBulkCargoForm.customer_val = ''
    oceanBulkCargoForm.fba_val = ''
    oceanBulkCargoForm.applyCustomsType = '买单报关'
    oceanBulkCargoForm.customsClearance = '一般贸易清关'
    oceanBulkCargoForm.payTaxesType = '不包税'
    oceanBulkCargoForm.deliveryTerms = 'DDU'
    oceanBulkCargoForm.purchaseInsurance = '否'
  } else {
    oceanBulkCargoForm.customer_val = record.customer
    oceanBulkCargoForm.fba_val = record.fba
  }
  oceanBulkCargoVisible_modal.value = true;
  Object.assign(oceanBulkCargoForm, record ?? {});
  oceanBulkCargoIsUpdate.value = !!record;
};

/* 保存编辑 */
const oceanBulkCargoSave = () => {
  if (!oceanBulkCargoFormRef.value) {
    return;
  }
  oceanBulkCargoFormRef.value.validate().then(() => {
    loading.value = true;
    const saveOrUpdate = oceanBulkCargoIsUpdate.value ? updateOceanBulkCargo : addOceanBulkCargo;
    saveOrUpdate(oceanBulkCargoForm).then((msg) => {
      loading.value = false;
      message.success(msg);
      oceanBulkCargoVisible_modal.value = false;
      oceanBulkCargoReload2();
    }).catch((e) => {
      loading.value = false;
      message.error(e.message);
    });
  }).catch(() => {
  });
};
</script>

<style lang="less" scoped></style>
